.theme-light {
  background-color: $studio-white;
  color: $studio-gray-60;

  .theme-color-bg {
    background-color: $studio-white;
  }
  .theme-color-bg-lighter {
    background-color: $studio-white;
  }
  .theme-color-fg {
    color: $studio-gray-80;
  }
  .theme-color-fg-dim {
    color: $studio-gray-50;
  }
  .theme-color-border {
    border-color: $studio-gray-5;
  }
  .search-field {
    border-color: $studio-gray-10;
  }
}

.theme-dark {
  background-color: $studio-gray-90;
  color: $studio-gray-20;

  .theme-color-bg {
    background-color: $studio-gray-90;
  }
  .theme-color-bg-lighter {
    background-color: $studio-gray-90;
  }
  .theme-color-fg {
    color: $studio-white;
  }
  .theme-color-fg-dim {
    color: $studio-gray-30;
  }
  .theme-color-border {
    border-color: $studio-gray-80;
  }

  ::-webkit-scrollbar-thumb {
    background-color: $studio-gray-80;
    border-color: $studio-gray-60;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: $studio-gray-90;
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: $studio-gray-50;
  }

  .button-borderless {
    color: $studio-simplenote-blue-30;

    &[disabled],
    &:disabled {
      svg[class^='icon-'] {
        fill: $studio-gray-60;
      }
    }
  }

  .icon-button,
  a {
    color: $studio-simplenote-blue-30;
  }

  input {
    color: $studio-white;
  }

  input,
  textarea {
    border-color: $studio-gray-70;
    background-color: transparent;
  }

  .transparent-input::placeholder,
  input::placeholder {
    color: $studio-gray-20;
  }

  .checkbox-control-base {
    border-color: $studio-gray-80;
  }

  .navigation-bar-item {
    button {
      color: $studio-white;
    }
    svg {
      fill: $studio-white;
    }
  }

  .navigation-bar-item.is-selected {
    button {
      color: $studio-simplenote-blue-30;
    }
    svg[class^='icon-'] {
      fill: $studio-simplenote-blue-30;
    }
  }
  .tag-list .tag-list-input.is-selected {
    color: $studio-simplenote-blue-30;
  }

  .tag-field input {
    background: transparent;

    &::placeholder {
      color: $studio-gray-20;
    }
  }

  .settings-group p {
    color: $studio-gray-5;
  }

  .tab-panels__tab-list {
    li {
      color: $studio-gray-50;

      &.is-active {
        color: $studio-simplenote-blue-30;
        border-bottom-color: $studio-simplenote-blue-30;
      }
    }

    li.button:active {
      background-color: $studio-simplenote-blue-30;
      color: $studio-white;
    }
  }

  .note-list-header {
    color: $studio-gray-30;
    background-color: rgba(50, 52, 54, 0.5);
  }

  .note-list-item {
    &.note-list-item-pinned .note-list-item-pinner {
      background: $studio-white;
      box-shadow: inset 0 0 0 2px $studio-gray-80,
        inset 0 0 0 3px $studio-gray-80;

      &:hover {
        background: $studio-gray-80;
      }
    }

    &.note-list-item-selected {
      background: #2c3338;
    }

    .note-list-item-excerpt {
      color: $studio-gray-20;
    }
  }
  &.note-list-item-selected .note-list-item-excerpt .note-list-item-pinner {
    box-shadow: inset 0 0 0 2px $studio-gray-80, inset 0 0 0 3px $studio-gray-90;

    &:hover {
      background: $studio-gray-80;
    }
  }

  .note-detail-markdown {
    @import '../node_modules/highlight.js/scss/solarized-dark.scss';

    hr {
      border-color: $studio-gray-80;
    }

    blockquote {
      border-color: $studio-gray-80;
    }

    pre {
      border-color: $studio-gray-80;
    }

    table {
      th,
      td {
        border-color: $studio-gray-60;
      }
      tr:nth-child(2n) {
        background-color: $studio-gray-80;
      }
    }
  }
}
